<template>
  <Crumbs
    :crumbName="[
      {
        route: '',
        name: '用户管理',
      },
    ]"
  />
  <a-card style="min-height: 90%">
    <div class="query border">
      <a-row>
        <a-col :span="6">
          <a-row>
            <a-col :span="9" class="right">
              <span>用户名查询：</span>
            </a-col>
            <a-col :span="15">
              <a-input v-model:value="username" placeholder="用户名" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-row>
            <a-col :span="9" class="right">
              <span>手机号查询：</span>
            </a-col>
            <a-col :span="15">
              <a-input v-model:value="mobile" placeholder="手机号" />
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="4" :offset="4">
          <a-row>
            <a-col :span="12">
              <a-button type="primary" @click="handleQueryUser">查询</a-button>
            </a-col>
            <a-col :span="12">
              <a-button @click="handleResetForm">重置</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="table border">
      <a-page-header title="数据列表">
        <template #extra>
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false'
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled type="primary">添加用户</a-button>
          </a-popover>
          <a-button
            v-else
            class="pass-btn"
            type="primary"
            @click="handleShowAddModal"
            >添加用户</a-button
          >
          <a-modal
            v-model:visible="addVisible"
            width="580px"
            title="添加用户"
            ok-text="确认"
            cancel-text="取消"
            :afterClose="addCloselModal"
            @ok="handleAddOk"
          >
            <a-form :model="addModel" :rules="formRules" ref="addFormRef">
              <a-form-item
                has-feedback
                :labelCol="{ span: 3, offset: 1 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                label="用户名："
                name="username"
              >
                <a-input
                  v-model:value="addModel.username"
                  placeholder="请填写用户名"
                />
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 3, offset: 1 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                label="密码："
                name="password"
              >
                <a-input
                  v-model:value="addModel.password"
                  placeholder="请填写密码"
                />
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 3, offset: 1 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                label="邮箱："
                name="email"
              >
                <a-input
                  v-model:value="addModel.email"
                  placeholder="请填写邮箱"
                />
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 3, offset: 1 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                label="手机号："
                name="mobile"
              >
                <a-input
                  v-model:value="addModel.mobile"
                  placeholder="请填写手机号"
                />
              </a-form-item>
              <a-form-item
                has-feedback
                :labelCol="{ span: 3, offset: 1 }"
                :wrapperCol="{ span: 18, offset: 1 }"
                label="角色："
                name="role_id"
              >
                <a-select
                  v-model:value="addModel.role_id"
                  :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                >
                  <a-select-option
                    value="1"
                    v-if="
                      this.$store.state.userStore.userInfos?.role_id === 1 &&
                      this.$store.state.userStore.userInfos?.status == 'true'
                    "
                    >超级管理员</a-select-option
                  >
                  <a-select-option value="2">管理员</a-select-option>
                  <a-select-option value="3">普通用户</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-modal>
        </template>
      </a-page-header>
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        rowKey="id"
        :pagination="tablePagination"
        @change="tablePageChange"
      >
        <template #role_id="{ record }">
          <span v-if="record.role_id == '1'">超级管理员</span>
          <span v-else-if="record.role_id == '2'">管理员</span>
          <span v-else-if="record.role_id == '3'">普通用户</span>
        </template>
        <template #status="{ record }">
          <a-switch
            v-if="record.status == 'true'"
            :checked="true"
            :disabled="true"
          />
          <a-switch v-else :checked="false" :disabled="true" />
        </template>
        <template #operation="{ record }">
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false' ||
              (record.role_id === 1 &&
                this.$store.state.userStore.userInfos?.role_id !== 1)
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button
              disabled
              size="small"
              type="primary"
              style="margin-right: 10px"
              >编辑</a-button
            >
          </a-popover>
          <a-button
            v-else
            size="small"
            type="primary"
            style="margin-right: 10px"
            @click="handleShowEditModal(record.id)"
            >编辑</a-button
          >
          <a-popover
            v-if="
              this.$store.state.userStore.userInfos?.role_id === 3 ||
              this.$store.state.userStore.userInfos?.status == 'false' ||
              (record.role_id === 1 &&
                this.$store.state.userStore.userInfos?.role_id !== 1)
            "
          >
            <template #content>
              <p>暂无权限</p>
            </template>
            <a-button disabled size="small" type="primary">删除</a-button>
          </a-popover>
          <a-popconfirm
            v-else
            title="此操作将永久删除该用户, 是否继续?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delUser(record)"
            @cancel="cancelDel"
          >
            <a-button size="small" type="primary" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <a-modal
        v-model:visible="editVisible"
        width="580px"
        title="编辑用户"
        ok-text="确认"
        cancel-text="取消"
        :afterClose="editCloselModal"
        @ok="handleEditOk"
      >
        <a-form :model="editModel" :rules="formRules" ref="editFormRef">
          <a-form-item
            has-feedback
            :labelCol="{ span: 3, offset: 1 }"
            :wrapperCol="{ span: 18, offset: 1 }"
            label="用户名："
            name="username"
          >
            <a-input
              v-model:value="editModel.username"
              placeholder="请填写用户名"
            />
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 3, offset: 1 }"
            :wrapperCol="{ span: 18, offset: 1 }"
            label="密码："
            name="password"
          >
            <a-input
              v-model:value="editModel.password"
              placeholder="请填写密码"
            />
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 3, offset: 1 }"
            :wrapperCol="{ span: 18, offset: 1 }"
            label="邮箱："
            name="email"
          >
            <a-input v-model:value="editModel.email" placeholder="请填写邮箱" />
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 3, offset: 1 }"
            :wrapperCol="{ span: 18, offset: 1 }"
            label="手机号："
            name="mobile"
          >
            <a-input
              v-model:value="editModel.mobile"
              placeholder="请填写手机号"
            />
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 3, offset: 1 }"
            :wrapperCol="{ span: 18, offset: 1 }"
            label="角色："
            name="role_id"
          >
            <a-select
              v-model:value="editModel.role_id"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            >
              <a-select-option
                value="1"
                v-if="
                  this.$store.state.userStore.userInfos?.role_id === 1 &&
                  this.$store.state.userStore.userInfos?.status == 'true'
                "
                >超级管理员</a-select-option
              >
              <a-select-option value="2">管理员</a-select-option>
              <a-select-option value="3">普通用户</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            has-feedback
            :labelCol="{ span: 3, offset: 1 }"
            :wrapperCol="{ span: 18, offset: 1 }"
            label="权限："
            name="status"
          >
            <a-switch v-model:checked="editModel.status" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
// 导入组件
import Crumbs from "@/components/Crumbs";
// 导入表格列配置
import { useColumns } from "./useColumns";
// 导入表格数据
import { useDataList } from "./useUserDataList";
// 导入删除用户方法
import { useDelUser } from "./useDelUser";
// 导入查询用户方法
import { useQueryUser } from "./useQueryUser";
// 导入重置表单方法
import { useResetForm } from "./useResetForm";
// 导入添加用户方法
import { useAddUser } from "./useAddUser";
// 导入编辑用户方法
import { useEditUser } from "./useEditUser";
// 导入表单校验规则
import { useFormRules } from "./useFormRules";

export default {
  name: "",
  components: {
    Crumbs,
  },
  setup() {
    // 表格列
    const { columns } = useColumns();

    // 表格数据
    const { data, tablePagination, getUserData } = useDataList();

    // 点击切换页面
    const tablePageChange = (pagination) => {
      tablePagination.current = pagination.current;
      tablePagination.pageSize = pagination.pageSize;
      // 重新渲染
      getUserData();
    };

    // 删除用户方法
    const { cancelDel, delUser } = useDelUser(getUserData);

    // 查询用户
    const { username, mobile, handleQueryUser } = useQueryUser(
      data,
      tablePagination
    );

    // 重置表单
    const { handleResetForm } = useResetForm(
      username,
      mobile,
      getUserData,
      tablePagination
    );

    // 添加用户
    const {
      addVisible,
      handleShowAddModal,
      addModel,
      addFormRef,
      addCloselModal,
      handleAddOk,
    } = useAddUser(getUserData);

    // 编辑用户
    const {
      editVisible,
      editModel,
      handleShowEditModal,
      editFormRef,
      editCloselModal,
      handleEditOk,
    } = useEditUser(getUserData);

    // 表单校验规则
    const { formRules } = useFormRules();

    return {
      columns, // 列配置
      data, // 数据
      tablePagination, // 分页配置
      tablePageChange, // 切换页面
      cancelDel, // 取消气泡框
      delUser, // 删除用户方法
      username, // 用户名输入框双向绑定
      mobile, // 手机号输入框双向绑定
      handleQueryUser, // 点击查询用户
      handleResetForm, // 重置表单方法
      addVisible, // 添加用户框显示状态
      handleShowAddModal, // 点击添加用户显示添加用户框
      addModel, // 添加表单内容
      addFormRef, // 表单ref
      addCloselModal, // 关闭模态框
      handleAddOk, // 点击确认
      editVisible, // 编辑用户框显示状态
      editModel, // 编辑表单内容
      handleShowEditModal, // 点击编辑用户显示编辑用户框
      editFormRef, // 表单ref
      editCloselModal, // 关闭模态框
      handleEditOk, // 确认编辑用户
      formRules, // 表单校验规则
    };
  },
};
</script>
<style scoped lang="less">
.query {
  height: 100px;
  margin-bottom: 15px;
  > .ant-row {
    margin-top: 30px;
    line-height: 40px;
  }
  span {
    font-size: 12px;
  }
  .ant-select {
    width: 100%;
  }
  .right {
    text-align: right;
    span {
      font-size: 13px;
    }
  }
}
.table {
  .ant-table-wrapper {
    padding: 16px;
  }
}
.border {
  border: 1px solid #ddd;
}
.ant-page-header {
  border-bottom: none !important;
}
</style>
